<template>
	<view class="layout-home">
		<view class="bg">
			
		</view>
		<div class="layout-bar" :style="{height:barHeight}"></div>
		<div class="layout-header" :class="{'layout-header--center':currentFooter.id===1}">
			<image v-show="currentFooter.id===2" @click="back" src="../../assets/home/arrow.png" mode="widthFix"></image>
			<text>{{currentFooter.title}}</text>
			<image v-show="currentFooter.id===2" src="../../assets/home/arrow.png" mode="widthFix"></image>
		</div>
		<div class="layout-main">
			<slot></slot>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barHeight: 20,
			}
		},
		props: {
			currentFooter: {
				default: ()=>({}),
			}
		},
		created() {

			const res = uni.getSystemInfoSync().statusBarHeight
			this.barHeight = res + "px"
		},
		methods:{
			back(){
				this.$emit("back")
			},
		},
	}
</script>

<style lang="scss" scoped>
	.layout-home {
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 416rpx;
			background: #3F4DD4;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.layout-bar {}

		.layout-header {
			height: 88rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			font-style: normal;
			text-transform: none;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 28rpx;
			position: relative;
			z-index: 10;
			
			&--center{
				justify-content: center;
			}
			
			image{
				width: 40rpx;
				
				&:last-child{
					opacity: 0;
				}
			}
		}

		.layout-main {
			height:1px;
			flex-grow: 1;
			width: 100%;
			
		}
	}
</style>